<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>
    <div class="flex items-center">
      <n-button type="primary" @click="addPackage">新增客户</n-button>
      <!--      <n-button type="primary" class="ml-3" @click="addPackage">导出数据</n-button>-->
    </div>
    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      ref="actionRef"
      :actionColumn="actionColumn"
    />
    <addModal ref="addModalRef" @update:list="reloadTable"></addModal>
  </n-card>
</template>

<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { columns } from './columns';
import { useRouter } from 'vue-router';
import { NButton, useDialog, useMessage } from 'naive-ui';
import addModal from './modal/add.vue';
import {
  clientUserList,
} from '@/api/cook';

const router = useRouter();
const dialog = useDialog();
const message = useMessage();
const actionRef = ref();
const addModalRef = ref(null);

const actionColumn = reactive({
  width: 150,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
        },
        {
          label: '续期',
          onClick: changeKey.bind(null, record, 'renew'),
        },
        {
          label: '正式',
          onClick: changeKey.bind(null, record, 'formal'),
          ifShow: () => {
            return record.type !== 'formal';
          },
        },
      ],
    });
  },
});
//后续参考对话
const changeKey = (record, key) => {
  if (key === 'renew') {
    dialog.info({
      title: '提示',
      content: `您确定要续期?`,
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        siteCustomerRenew({ id: record.id, site_id: record.site_id }).then((res) => {
          message.success('成功');
          reloadTable();
        });
      },
    });
  } else if (key === 'formal') {
    dialog.info({
      title: '提示',
      content: `您确定要开通正式?`,
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        siteCustomerFormal({ id: record.id, site_id: record.site_id }).then((res) => {
          message.success('成功');
          reloadTable();
        });
      },
    });
  }
};
//拉取列表
const loadDataTable = async (res) => {
  const query = JSON.parse(JSON.stringify(getFieldsValue()));
  if (query.created_time?.[1]) {
    query.created_time[1] = query.created_time[1] + 86400000;
  }
  return await clientUserList({ ...query, ...res });
};

function reloadTable() {
  actionRef.value.reload();
}

function handleEdit(record) {
  addModalRef.value.open(record, 'edit');
}


const addPackage = () => {
  addModalRef.value.open({}, 'add');
};

const siteList = ref([]);
const saleList = ref([]);

const getData = () => {
  siteSelect().then((res) => {
    siteList.value = res;
  });
  // siteSaleSelect().then((res) => {
  //   saleList.value = res;
  // });
};
//搜索表单
const schemas: FormSchema[] = [
  {
    field: 'id',
    component: 'NInput',
    label: '客户ID',
    componentProps: {
      placeholder: '请输入客户',
      onInput: (e: any) => {
        // console.log(e);
      },
    },
  },
  {
    field: 'nickname',
    component: 'NInput',
    label: '客户名称',
    componentProps: {
      placeholder: '请输入客户名称',
    },
  },
  {
    field: 'status',
    component: 'NSelect',
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
      options: [
        {
          label: '正常',
          value: 't',
        },
        {
          label: '禁用',
          value: 'f',
        },
      ],
      onUpdateValue: (e: any) => {
        // console.log(e);
      },
    },
  },
  {
    field: 'created_time',
    component: 'NDatePicker',
    label: '添加时间',
    componentProps: {
      type: 'daterange',
      clearable: true,
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
];

const [register, { getFieldsValue }] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});

const handleSubmit = (values) => {
  console.log(values);
  reloadTable();
};

const handleReset = (values) => {
  console.log(values);
};

onMounted(() => {
  // getData();
});
</script>

<style lang="less" scoped></style>
